// 导入基础库
import React from 'react'
import { connect } from 'umi'
// 导入配置参数
import df from '../../../../config/dataFormat'
// 导入处理函数
import xl from '../../../utils/xlsx'
// 导入UI组件
import { Row, Col, Upload, Card, Button, Space, Table } from 'antd'
const { Dragger } = Upload
import IconMap from '../../../utils/icons'
// 导入LESS样式
import styles from './setp.less'

const Setp = (props) => {
    // 初始化参数------------------------------------------------
    const { ui, table: tb, socketio: io, dispatch: dp } = props

    // 公共函数
    const open_sheet = (sheet) => {
        // 打开sheet表函数
        let sheet_data = xl.open_sheet(sheet, tb.imp_workbook)
        let tb_data = xl.xlsx_to_table(sheet_data)
        dp({ type: 'table/save', payload: { imp_sheetName: sheet, ...tb_data } })
    }

    const remove_file = () => {
        dp({
            type: 'table/save',
            payload: {
                imp_fileName: '',
                imp_sheets: [],
                imp_sheetName: '',
                imp_cols: [],
                imp_data: [],
                table_bd_tags: df.table_bd_tags
            }
        })
    }
    // 组件事件处理函数

    // 组件参数配置
    // 上传参数
    const upload_props = {
        name: 'file',
        accept: '.xls,.xlsx',
        multiple: false,
        showUploadList:true,
        maxCount: 1,
        listType: 'picture',
        onChange(info) {
            const { status } = info.file;
            if (status === 'removed') remove_file()
        },
        beforeUpload: file => {
            xl.open_file(file)
                .then((workbook) => {
                    remove_file()
                    dp({ type: 'table/save', payload: { imp_fileName: file.name, imp_workbook: workbook, imp_sheets: workbook.SheetNames } })
                })
        }
    }


    // 表格参数
    const table_props = {
        bordered: true,
        scroll: { x: tb.imp_cols.length * 100 + 500, y: 600 },
        size: 'small',
        pagination: {
            show: true,
            showSizeChanger: false,
            pageSize: 200,
            total: tb.imp_data.length,
        },
        columns: tb.imp_cols,
        dataSource: tb.imp_data
    }

    return (
        <div>
            <Space className={styles.btn}>
                <Button type="primary" disabled={tb.imp_data.length === 0 ? true : false} onClick={() => dp({ type: 'ui/save', payload: { imp_tab_id: '2' } })}>已完成文件导入，进行下一步操作</Button>
            </Space>
            <Row gutter={20}>
                <Col span={7}>
                    <Space direction="vertical" style={{width:"100%"}}>
                        <Dragger {...upload_props} >
                            <p className="ant-upload-drag-icon">
                                {IconMap['upload']}
                            </p>
                            <p className="ant-upload-text">点击或拖入文件导入表格</p>
                        </Dragger>

                        <Card title="选择需要导入的表" style={{ display: tb.imp_sheets.length === 0 ? 'none' : '' }}>
                            <Space size={10} wrap>
                                {tb.imp_sheets.map((sheet, id) => (
                                    <Button key={id} onClick={() => open_sheet(sheet)} >{sheet}</Button>
                                ))}
                            </Space>
                        </Card>
                    </Space>
                </Col>
                <Col span={17}>
                    <Table {...table_props} />
                </Col>
            </Row>
        </div>
    )
}

export default connect(
    ({ ui, table, socketio }) => ({ ui, table, socketio })
)(Setp)